<template>
	<view class="">
		<view class="container" v-if="indexvideo && !showIndex">
			<video :poster="haibao1" class="video" @timeupdate="videoTimeUpdateEvent" :src="indexvideo"
				:controls="false" autoplay objectFit="cover"></video>
			<div class="overlay-button" @click="handleButtonClick"></div>
		</view>
		<view class="" v-if="showIndex">
			<view class="bg"></view>
			<!-- 顶部搜索 -->
			<image :src="sucai['index_search']" mode="widthFix" style="width: 100%;"
				@click="goPage('/pages/search/searcharticle?status=1', true)"></image>
			<!-- 		<u-navbar :is-back="false" title="首页" title-color="#fff" :background="background" :border-bottom="false"
				:is-fixed="false"> </u-navbar>
			
			<view class="" style="padding: 24rpx;position: relative;">
				<u-search placeholder="今日新品搭配" :show-action="false" bg-color="#fff" border-color="#7487FF"
					:clearabled="false" v-model="keyword" search-icon="scan"></u-search>
				<u-icon name="camera" size="36" @click="toPhoto" color="#9a9a9a"
					style="position: absolute;right: 80rpx;top: 40rpx;z-index:99999;"></u-icon>
			</view> -->

			<view class="top_btn_group">
				<!-- index_shop -->
				<view class="top_btn_item" @click="goPage('/pages/index/newIndex?status=1', true)">
					<!-- <image src="@/static/image/index_1.png" mode="widthFix" class="index_top_icon"></image> -->
					<image :src="banar[0]" mode="widthFix" class="index_top_icon"></image>
					<view class="top_title">
						破土设计
					</view>
					<view class="top_name">
						(设计商城)
					</view>
				</view>
				<view class="top_btn_item">
					<image :src="banar[1]" mode="widthFix" class="index_top_icon"></image>
					<view class="top_title">
						破土森林
					</view>
					<view class="top_name">
						(美学社区)
					</view>
				</view>
				<view class="top_btn_item" @click="goPage('/pages/index/secondIndex?status=1', true)">
					<image :src="banar[2]" mode="widthFix" class="index_top_icon"></image>
					<view class="top_title">
						破土计划
					</view>
					<view class="top_name">
						(公益与教育)
					</view>
				</view>
			</view>
			<view class="water-fill">
				<template v-if="waterList.length != 0">
					<view class="water-wrapper">
						<view class="water-box">
							<view class="water-sub" v-for="(items,index1) in waterList" :key="index1">
								<view class="water-item" v-for="(item,index) in items" :key="index">
									<view class="water-top" @click="toDetail(item)">
										<image :src="item.images" mode="widthFix"></image>
										<h3>{{item.title}}</h3>
									</view>
									<view class="water-bottom">
										<view class="water-bottom-item" @click="gousersq('viewohteruser',item.user_id)">
											<view class="img-box">
												<image class="water-avatar" v-if="item.avatar" :src="item.avatar"
													mode="aspectFill"></image>
												<image class="water-avatar" v-else src="@/static/image/heard.png"
													mode="aspectFill"></image>

											</view>
											<text class="water-name">{{item.username}}</text>
										</view>
										<view class="water-bottom-item">
											<!-- <u-icon name="heart" size="40"></u-icon> -->

											<u-icon @click="sc_btn(1,index,item)" v-if="item.is_sc==0" name="heart"
												size="36" color="#628e3c"></u-icon>
											<u-icon @click="sc_btn(2,index,item)" v-else name="heart-fill"
												size="36"></u-icon>



											<text>{{item.likeCount}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
				<view class="water-none" v-if="waterList.length == 0">
					<text>暂无数据</text>
				</view>
			</view>

			<image src="/static/image/add.png" mode="aspectFill" class="float_img" @click="toAdd" v-if="showIndex">
			</image>
		</view>

		<u-popup v-model="showImg" mode="center" border-radius="20" mask-close-able="false">
			<view style="width: 400rpx;height: 600rpx;background-color: transparent;position: relative;">
				<!-- :list="listImg"  -->
				<u-swiper height="540" :list="vuex_config.swiper_indextcposter" bg-color="#fff0"></u-swiper>
				<view class="close_pop" @click="toClose">
					<u-icon name="close-circle" size="40" color="#fff"></u-icon>
				</view>
			</view>
		</u-popup>

		<!-- 底部导航 -->
		<fa-tabbar v-if="showIndex"></fa-tabbar>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				listImg: uni.getStorageSync('swiper_indextcposter'),
				indexvideo: '',
				haibao1: '',
				showIndex: false,
				background: {
					backgroundColor: "transparent",
				},
				waterList: [],
				list: [],
				artclelist: [],
				recommends: [],
				banar: [],
				cate: [],
				sucai: [],
				showImg: false,
			}
		},
		onLoad() {},
		onShow() {
			if (uni.getStorageSync('showIndex') == 0) {
				this.getVideo()
			} else {
				this.getVideo()
				this.showIndex = true
			}
			this.getpublicArticleList();
		},
		created() {

		},
		onReachBottom(e) {

		},
		methods: {
			toAdd() {
				uni.navigateTo({
					url: '/sub_pages/addIndex/addIndex'
				})
			},
			getGoodsIndex() {
				this.$api.getGoodsIndex().then(({
					code,
					data: res,
					msg
				}) => {
					if (code) {
						this.hots = res.hots;
						this.recommends = res.recommends;
					}
				});
			},

			indexshow() {
				this.$api.getGoodsIndex().then(({
					code,
					data: res,
					msg
				}) => {
					if (code) {
						this.hots = res.hots;
						this.recommends = res.recommends;


					}
				});
			},

			getpublicArticleList() {
				this.$api.getpublicArticleList().then(({
					code,
					data: res,
					msg
				}) => {
					if (code) {
						this.list = res.data;
						console.log(111, this.list);
						let length = this.list.length;
						this.waterList = this.groupCut(this.list, length / 2)
						// this.hots = res.hots;
						// this.recommends = res.recommends;
					}
				});
			},


			videoTimeUpdateEvent(e) {
				console.log(e)
				//播放完成
				if (Number(e.detail.duration).toFixed(0) <= Number(Number(e.detail.currentTime).toFixed(0)) + 2) {
					this.showIndex = true
					this.indexvideo = ''
					this.showImg = true
					uni.setStorageSync('showIndex', 1)

				}

			},

			getVideo() {
				this.$api.indexShow().then(res => {
					if (res.code == 1) {
						this.indexvideo = res.data.indexvideo
						this.haibao1 = res.data.haibao1
						this.banar = res.data.banar
						this.cate = res.data.catelist;
						this.sucai = res.data.sucai;
						console.log('this.haibao1', this.haibao1)
					}
				})
			},

			handleButtonClick() {
				this.showIndex = true
				this.indexvideo = ''
				this.showImg = true
				uni.setStorageSync('showIndex', 1)
			},
			toDetail(item) {

				uni.navigateTo({
					url: '/sub_pages/indexDetail/indexDetail?id=' + item.id
				})
			},

			sc_btn(type, index, item) {
				console.log(type, index);
				// return false;
				let flag = "";
				let is_sc = 0;
				if (type == 1) {
					flag = "sc";
					// this.detail_msg.is_sc = 1
					is_sc = 1

				} else {
					is_sc = 0
				}

				this.$api.uerArticleSc({
					oid: item.id,
					is_sc: is_sc,
				}).then((res) => {
					console.log(res)
					if (res.code) {
						item.is_sc = is_sc
						this.$forceUpdate()
					} else {

					}
					// this.detail_msg = res.data; 
					// this.get_uerArticleliuyanList(id);

				});
				// this.$forceUpdate()
			},


			gousersq(flag, uid) {
				uni.navigateTo({
					url: '/sub_pages/myPublish/myPublish?flag=' + flag + '&publishuid=' + uid
				})

			},




			toPhoto() {
				console.log(1)
			},
			// 将数组拆分成可使用状态,减少代码
			groupCut(array, subGroupLength) {
				let index = 0;
				let newArray = [];
				while (index < array.length) {
					newArray.push(array.slice(index, index += subGroupLength));
				}
				return newArray;
			},
			handleLoad(arr) {
				// 如果arr存在,即在父组件刷新的值  若不存在就是下拉请求刷新
				// if (arr) {
				let length = this.list.length;
				this.waterList = this.groupCut(this.list, length / 2)
				// } else {
				// 	console.log('写请求数据接口，将数据赋值给waterList')
				// }
				// uni.showToast({
				// 	title: '刷新啦'
				// })
			},
			// 监听页面下拉刷新
			//触摸开始
			handletouchstart: function(e) {
				let that = this;
				console.log(1)
				that.$refs.refreshView.handletouchstart(e)
			},

			//触摸移动
			handletouchmove: function(e) {
				let that = this;
				that.$refs.refreshView.handletouchmove(e)
			},
			//触摸结束
			handletouchend: function(e) {
				let that = this;
				that.$refs.refreshView.handletouchend(e);
				that.getpublicArticleList();
			},

			toClose() {
				this.showImg = false
			}
		},
	}
</script>
<style lang="scss">
	page {
		background-color: #f4f6f8;
	}

	/deep/.u-mode-center-box {
		background-color: transparent !important;
	}
</style>
<style lang="scss" scoped>
	.indicator-dots {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.indicator-dots-item {
		background-color: $u-tips-color;
		height: 6px;
		width: 6px;
		border-radius: 10px;
		margin: 0 3px;
	}

	.indicator-dots-active {
		background-color: $u-type-primary;
	}

	.notice {
		margin-bottom: 30rpx;
	}

	.index-content {
		margin-top: 30rpx;
		background-color: #ffffff;

		.title {
			position: relative;
			padding: 30rpx 50rpx;
			border-bottom: 1px solid #f4f6f8;

			.stroke {
				&::before {
					content: '';
					width: 8rpx;
					height: 30rpx;
					background-color: #374486;
					position: absolute;
					top: 36%;
					left: 30rpx;
					border-radius: 20rpx;
				}
			}
		}
	}

	.goods-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 30rpx;
		padding: 0 30rpx;

		.item {
			width: calc((100vw - 90rpx) / 2);
			background-color: #ffffff;
			box-shadow: 0px 0px 5px rgb(233, 235, 243);
			margin-bottom: 30rpx;
			border-radius: 10rpx;
			overflow: hidden;
			border: 1px solid #e9ebf3;

			.name {
				min-height: 110rpx;
			}

			.foot {
				padding: 0 15rpx;
			}

			.images {
				width: 100%;
				height: 350rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.market_price {
				text-decoration: line-through;
				margin-left: 10rpx;
			}
		}
	}

	.hots-list {
		margin-top: 30rpx;
		padding: 0 30rpx 30rpx;

		.item {
			width: 100%;
			background-color: #ffffff;
			box-shadow: 0px 0px 5px rgb(233, 235, 243);
			margin-bottom: 30rpx;
			border-radius: 10rpx;
			overflow: hidden;
			border: 1px solid #e9ebf3;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.images {
				width: 250rpx;
				height: 220rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.content {
				flex: 1;

				.name {
					min-height: 110rpx;
				}

				.foot {
					padding: 0 15rpx;
				}

				.market_price {
					text-decoration: line-through;
					margin-left: 10rpx;
				}
			}
		}
	}
</style>

<style lang="less" scoped>
	.water-fill {
		.water-wrapper {
			.water-box {
				display: flex;
				width: 100%;
				box-sizing: border-box;
				font-size: 0;
				justify-content: space-between;
				// background-color: #f5f8f9;
				padding: 10px 5px;

				.water-sub {
					display: flex;
					width: 49%;
					overflow: hidden;
					flex-direction: column;

					.water-item {
						width: 100%;
						border-radius: 12upx;
						overflow: hidden;
						background-color: #FFFFFF;
						margin-bottom: 10upx;

						.water-top {
							image {
								width: 100%;
							}

							h3 {
								font-family: PingFangHK-Medium;
								font-size: 28upx;
								font-weight: 600;
								line-height: 40upx;
								color: #333333;
								text-align: justify;
								margin: 20upx;
								.n-ellipsis(2);
							}
						}

						.water-bottom {
							display: flex;
							justify-content: space-between;
							margin: 0 20upx 20upx 20upx;
							font-size: 24upx;

							.water-bottom-item {
								display: flex;
								align-items: center;

								.img-box {
									display: flex;
									align-items: center;
									justify-content: center;
									// width: 80upx;
									// height: 80upx;
									border-radius: 50%;
									overflow: hidden;

									.water-avatar {
										width: 80upx;
										height: 80upx;
									}
								}

								.water-name {
									max-width: 160upx;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								}

								text {
									line-height: 32upx;
									font-size: 24upx;
									color: #333;
									margin-left: 14upx;
								}

								image {
									width: 28upx;
								}
							}
						}
					}
				}
			}
		}

		.water-none {
			// position: fixed;
			top: 0;
			bottom: 0;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;


			image {
				width: 200upx;
			}

			text {
				padding-top: 40upx;
				font-size: 24upx;
				color: #999;
				z-index: -1;
				position: relative;
			}
		}
	}


	//多行文本省略
	.n-ellipsis(@n) {
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: @n;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		word-break: break-all;
	}

	.top_btn_group {
		background-color: #f7faeb;
		display: flex;
		align-items: flex-end;

		.top_btn_item {
			width: 33.33%;
			text-align: center;

			.index_top_icon {
				width: 196rpx;
			}

			.top_title {
				font-family: 'MyFont';
				font-weight: 400;
				font-size: 32rpx;
				color: #529030;
				line-height: 44rpx;
				text-align: center;
				font-style: normal;
				text-transform: none
			}

			.top_name {
				font-family: 'MyFont';
				font-weight: 600;
				font-size: 16rpx;
				color: rgba(51, 51, 51, 0.4);
				line-height: 44rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}
	}

	.container {
		position: relative;
		width: 100%;
		height: 100vh;
		/* 根据需要调整视频高度 */
	}

	.video {
		width: 100%;
		height: 100%;
	}

	.overlay-button {
		position: fixed;
		top: 70%;
		width: 100%;
		height: 100%;
		left: 50%;
		z-index: 99999;
		transform: translate(-50%, 0);
		padding: 10px 20px;
		border: none;
		border-radius: 5px;
	}

	.float_img {
		width: 100rpx;
		height: 100rpx;
		position: fixed;
		bottom: 200rpx;
		right: 20rpx;
	}

	.close_pop {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
	}
</style>